<template>
  <div id="box">
    <div class="top">
      <icon name="arrow-left" @click="onCike" />
      <p id="p1">赞过</p>
    </div>
    <div id="center">
      <p id="p2">还未点赞过内容哦~</p>
      <router-link :to="{ name: 'Home' }">
        <Button @click="regHandle" class="btn" :color="btncor"
          >去首页逛逛</Button
        >
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Icon, Button } from "vant";
import router from "../router";
const onCike = () => {
  router.go(-1);
};
</script>

<style scoped>
#box {
  width: 100%;
  height: 100%;
  background-color: rgb(246, 246, 246);
  background-image: url(../images/xiaoxiong.png);
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: center 160px;
  position: relative;
}
.van-icon-arrow-left:before {
  font-size: 30px;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 8vh;
  background-color: white;
}
#p1 {
  /* flex: 1; */
  text-align: center;
  font-size: 19px;
  margin-right: 43vw;
}
#p2 {
  position: absolute;
  top: 84vw;
  left: 19vh;
  font-size: 17px;
}
.btn {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  padding: 12px;
  width: 80%;
  margin-top: 40px;
  border-radius: 18px;
  color: white;
  background-color: orange;
  /* background-image: linear-gradient(to right, #a6c1ee, #fbc2eb); */
  position: absolute;
  top: 84vw;
  left: 6vh;
}
</style>